<template>
  <!-- 数据分析 -->
  <view>
    <view class="qiun-charts">
      <canvas
        canvas-id="Budget"
        id="Budget"
        class="charts-pie"
        @touchstart="touchLineA"
        @touchmove="moveLineA"
        :style="{
          width: cWidth * pixelRatio + 'px',
          height: cHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
    </view>

    <!-- 	<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">医疗收入和不收费材料趋势</view>
		</view> -->
    <view class="qiun-charts">
      <canvas
        canvas-id="medical"
        id="medical"
        @touchstart="touchColumnA"
        @touchmove="MedicalMove"
        class="charts-pie"
        :style="{
          width: cWidth * pixelRatio + 'px',
          height: cHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from "@/components/u-charts/u-charts.js";
var _this;
var Budget = null;
var MedicalMater = null;

export default {
  data() {
    return {
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
      serverData: "",
      piearr: [],
      BudgetData: {
        categories: [
          "妇科",
          "妇保科",
          "产科",
          "健康体验中心",
          "儿保科",
          "计划生育康复科门诊",
        ],
        series: [
          {
            name: "检查",
            data: [35, 36, 31, 33, 13, 34],
          },
          {
            name: "化验",
            data: [18, 27, 21, 13, 10, 23],
          },
          {
            name: "治疗",
            data: [32, 27, 12, 24, 16, 21],
          },
          {
            name: "手术",
            data: [14, 27, 32, 34, 20, 12],
          },
          {
            name: "放射",
            data: [22, 23, 13, 24, 16, 28],
          },
          {
            name: "诊察",
            data: [23, 36, 21, 21, 18, 30],
          },
        ],
      },

      MedicalList: {
        categories: [
          "妇科",
          "妇保科",
          "产科",
          "健康体验中心",
          "儿保科",
          "计划生育康复科门诊",
        ],
        series: [
          {
            name: "检查",
            data: [35, 36, 31, 33, 13, 34],
          },
          {
            name: "化验",
            data: [18, 27, 21, 13, 10, 23],
          },
          {
            name: "治疗",
            data: [32, 27, 12, 24, 16, 21],
          },
          {
            name: "手术",
            data: [14, 27, 32, 34, 20, 12],
          },
          {
            name: "放射",
            data: [22, 23, 13, 24, 16, 28],
          },
          {
            name: "诊察",
            data: [23, 36, 21, 21, 18, 30],
          },
        ],
      },
    };
  },
  onLoad() {
    _this = this;
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
    this.refreshList();
  },
  methods: {
    refreshList() {
      _this.StructuralAnalysis("Budget", this.BudgetData);
      _this.MedicalMaterialsTrend("medical", this.MedicalList);
    },
    // 图表渲染
    StructuralAnalysis(canvasId, chartData) {
      Budget = new uCharts({
        $this: _this,
        canvasId: canvasId,
        type: "column",
        legend: true,
        fontSize: 11,
        dataLabel: false, // 隐藏数据点标签
        background: "#FFFFFF",
        pixelRatio: _this.pixelRatio,
        animation: true,
        enableScroll: true, // 开启图表拖拽功能
        categories: chartData.categories,
        series: chartData.series,
        xAxis: {
          disableGrid: true, // 绘制Y坐标轴网格
          itemCount: 5, // x轴单屏显示数据的数量，默认为5个
          gridType: "dash",
          dashLength: 8,
        },
        yAxis: {
          //disabled:true
        },
        width: _this.cWidth * _this.pixelRatio,
        height: _this.cHeight * _this.pixelRatio,
        extra: {
          column: {
            type: "stack",
            width:
              (_this.cWidth * _this.pixelRatio * 0.5) /
              chartData.categories.length,
          },
        },
      });
    },
    MedicalMaterialsTrend(canvasId, chartData) {
      MedicalMater = new uCharts({
        $this: _this,
        canvasId: canvasId,
        type: "line",
        fontSize: 11,
        legend: true,
        dataLabel: false,
        dataPointShape: true,
        background: "#FFFFFF",
        pixelRatio: _this.pixelRatio,
        enableScroll: true, // 开启图表拖拽功能
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: "grid",
          gridColor: "#CCCCCC",
          gridType: "dash",
          itemCount: 5, // x轴单屏显示数据的数量，默认为5个
          dashLength: 8,
        },
        yAxis: {
          gridType: "dash",
          gridColor: "#CCCCCC",
          dashLength: 8,
          splitNumber: 5,
          format: (val) => {
            return val.toFixed(0) + "万";
          },
        },
        width: _this.cWidth * _this.pixelRatio,
        height: _this.cHeight * _this.pixelRatio,
        extra: {
          line: {
            type: "straight",
          },
        },
      });
    },
    // 触摸
    touchLineA(e) {
      Budget.scrollStart(e);
      Budget.scrollEnd(e);
      Budget.showToolTip(e, {
        format: function (item, category) {
          if (typeof item.data === "object") {
            return item.name + ":" + item.data.value;
          } else {
            return item.name + ":" + item.data;
          }
        },
      });
    },
    touchColumnA(e) {
      // if (e.target.id = "medicalmaterials") {
      MedicalMater.scrollStart(e);
      MedicalMater.scrollEnd(e);
      MedicalMater.showToolTip(e, {
        format: function (item, category) {
          if (typeof item.data === "object") {
            return category + " " + item.name + ":" + item.data.value;
          } else {
            return category + " " + item.name + ":" + item.data;
          }
        },
      });
      // }
    },

    // 移动
    moveLineA(e) {
      Budget.scroll(e);
    },
    MedicalMove(e) {
      MedicalMater.scroll(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.age-conlist {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1px solid $uni-border-color;

  .age-conflex {
    flex: 1;
  }

  .age-center {
    text-align: center;
  }

  .age-right {
    text-align: right;
  }

  .age-pic {
    padding: 4rpx 14rpx;
    background-color: #1ae1ff;
    border-radius: 50%;
    color: #ffffff;
  }
}
.qiun-common-mt {
  margin-top: 10upx;
}

.qiun-bg-white {
  background: #ffffff;
}

.qiun-title-bar {
  width: 96%;
  padding: 10upx 2%;
  flex-wrap: nowrap;
}
</style>
